<template>
  <div>
    <div class="page-header" style="margin-bottom: 0;">
      <div class="left">
        <h3 class="page-title" style="margin-bottom: 0;">出版社图书数量概括</h3>
      </div>
      <div class="">
        <el-select
            v-model="state.value"
            multiple
            collapse-tags
            placeholder="自行选择出版社数据"
            style="width: 240px"
        >
          <el-option
              v-for="item in state.select"
              :key="item.name"
              :label="item.name"
              :value="item.name"
          />
        </el-select>
        <el-button @click="changeOption(1)">生成图表</el-button>
      </div>
    </div>
    <div ref="chartLine" style="width:100%; height:calc(100vh - 280px);min-height: 600px;"></div>
  </div>
</template>

<script setup>
import {ref, onMounted, reactive, watch, computed} from 'vue'
import * as echarts from 'echarts'
import {get} from "@/utils/request";

const chartLine = ref(null)
let state = reactive({
  select: [],
  value: [],
  on: []
})
const option = reactive({
  legend: {
    bottom: '0'
  },
  toolbox: {
    show: false,
    feature: {
      mark: {show: true},
      dataView: {show: true, readOnly: false},
      restore: {show: true},
      saveAsImage: {show: true}
    }
  },
  series: [
    {
      name: '无数据',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: []
    }
  ]
})
const changeOption = async (t) => {
  let fullData = await get('/publish-stats')
  if (t) {
    option.series[0].data = filteredArray
    chartLine.value = echarts.init(chartLine.value)
    chartLine.value.setOption(option)
  } else {
    state.select = deepClone(fullData)
    const selectedData = []
    if (fullData.length >= 8) {
      while (selectedData.length < 8) {
        const randomIndex = Math.floor(Math.random() * fullData.length)
        const randomData = fullData.splice(randomIndex, 1)[0]
        if (!selectedData.includes(randomData)) {
          selectedData.push(randomData)
        }
      }
      // 给到随机5条数据
      option.series[0].data = selectedData
    } else {
      // 给到全部数据
      option.series[0].data = fullData
    }
    chartLine.value = echarts.init(chartLine.value)
    chartLine.value.setOption(option)
  }
}


function deepClone(Origin, Target) {
  Target = Target || {};
  var key, strTO = Object.prototype.toString, arrType = '[object Array]';
  for (key in Origin) {
    if (Origin.hasOwnProperty(key)) {
      if (typeof Origin[key] === 'object' && typeof Origin[key] !== null) {
        strTO.call(Origin[key]) === arrType ? Target[key] = [] : Target[key] = {};
        deepClone(Origin[key], Target[key]);
      } else {
        Target[key] = Origin[key];
      }
    }
  }
  return Target;
}

onMounted(() => {
  changeOption()
})

const filteredArray = computed(() => {
  const result = [];
  for (let i in state.select) {
    const item = state.select[i];
    if (state.value.includes(item.name)) {
      result.push(item);
    }
  }
  return result;
});
</script>
